import React from 'react'
import { connect } from 'dva'
import { Breadcrumb,Icon,Button,DatePicker,Select } from 'antd'
import styles from './heatmap/Heatmap.less'
import request from "./../utils/request.js"
import areas from './../mock/areas.js'

class Heatmap extends React.Component{
    constructor(props){
        super(props);
        this.bmap=React.createRef();
        this.state={
            map:null,
            heatmapOverlay:null,
            points:[],
            startDate:"",
            endDate:"",
            currentProvince:"",
            areas:areas
        }
    }
    render(){
        return (
            <div  className={`${styles.pageContent} ${styles.heatMap}`}>
                {/* 头部 */}
                <div className={styles.pageHeader} style={{backgroundColor:"#fff"}}>
                    <Breadcrumb>
                        <Breadcrumb.Item href="/">
                            <Icon type="home" />
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            热力图 
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                {/* 搜索框 */}
                <div className={styles.searchBar}>
                    <span>起止时间：</span>
                    <DatePicker.RangePicker onChange={this.setDate.bind(this)} style={{width:"552px"}} />
                    <span> &nbsp;省：</span>
                    <Select 
                        defaultValue="全国" 
                        onChange={this.handleProvinceSelect.bind(this)} 
                        style={{width:"120px"}}>
                        <Select.Option value="全国"> 全国 </Select.Option>
                        {
                            this.state.areas.map((item,index)=>{
                                return <Select.Option value={item} key={item}>{item}</Select.Option>
                            })
                        }        
                    </Select >
                    <Button type="primary" onClick={this.refresh.bind(this)}>
                        刷新
                        <Icon type="search" />
                    </Button>
                    <Button type="primary" onClick={this.reset.bind(this)}>
                        重置
                        <Icon type="undo" />
                    </Button>
                </div>
                <div id="bmap" className={[styles.bmap].join(" ")} ref={this.bmap}>
                	绘图区域
                </div>    
        	</div>
        )
    }
    componentDidMount(){
        //this.map.current 在当前等同于document.getElementById("map")，百度可以直接使用dom中的id所有这里可以直接传入"map"
        this.setState({
            map:new window.BMap.Map(this.bmap.current,{
                minZoom:5,
                maxZoom:19
            }),
            heatmapOverlay:new window.BMapLib.HeatmapOverlay({
                "radius":5
            })
        },()=>{
            this.state.map.centerAndZoom(new window.BMap.Point(116.395645038,39.9299857781), 12);     
            this.state.map.addControl(new window.BMap.NavigationControl({
                anchor: window.BMAP_ANCHOR_TOP_LEFT
            }));                           
            this.state.map.enableScrollWheelZoom(true); 
            request("http://localhost:8094/point/getAllPoints?tableName=yuntu_orgdt_beijing_user_heat_map_info",{},(da)=>{ //成功
                if(da.state){
                    this.setState({
                        points:da.data.map(function(item,index){
                                return {
                                    lng:item.longitude,
                                    lat:item.latitude,
                                    count:Math.floor(Math.random()*(100 - 1) + 1)
                                }
                            })
                    })           
                    this.state.map.addOverlay(this.state.heatmapOverlay);            
                    this.state.heatmapOverlay.setDataSet({
                        data:this.state.points,
                        max:100
                    });
                }
            },function(err){  //可能是网络错误，也有可能是业务错误
                console.log(err);
            },"POST");
            this.state.map.addEventListener("zoomend",(type)=>{
                this.state.heatmapOverlay.setDataSet({
                    data:this.state.points,
                    max:100
                });    
            });
            this.state.map.addEventListener("moveend",(type)=>{
                this.state.heatmapOverlay.setDataSet({
                    data:this.state.points,
                    max:100
                });    
            });
        });
        /**
         *  1> 与vue类似，state或者props的更新都是异步不，这就是说你setState后直接使用this.state.property不一定能立即获取到更新
         *      后的值，vue还有个方法nexttick与此有关。
         *  2>  如果你要用更新后的state值去做一些事，就写在this.setState({}, callback)的回调函数中.
         *  3> 目前这种写法实际上没有发挥react state与数据对应的优势，这是因为百度地图还没有react颁布，关键的一点就是他不是响应式的。
         *  4> 默认热力图只能渲染地图可见区域，拖拽后也不能解决，之前用echarts bmap没发生这个问题，zoomend、moveend两个事件
         *      完完全全是传统开发思维。  
         */
    }
    refresh(){
        //获取查询条件值后查询新的数据
        request("http://localhost:8094/point/getAllPoints?tableName=yuntu_orgdt_beijing_user_heat_map_info",{
            startDate:this.state.startDate,
            endDate:this.state.endDate,
            currentProvince:this.state.currentProvince
        },(da)=>{ //成功
            if(da.state){
                this.setState({
                    points:da.data.map((item,index)=>{
                        return {
                            lng:item.longitude,
                            lat:item.latitude,
                            count:Math.floor(Math.random()*(100 - 1) + 1)
                        }
                    })
                },()=>{                  
                    this.state.heatmapOverlay.setDataSet({
                        data:this.state.points,
                        max:100
                    });
                })           
            }
        },function(err){  //可能是网络错误，也有可能是业务错误
            console.log(err);
        },"POST");
    }
    reset(){
        //清空表单空间、state数据后查询数据
        request("http://localhost:8094/point/getAllPoints?tableName=yuntu_orgdt_beijing_user_heat_map_info",{},(da)=>{ //成功
            if(da.state){
                this.setState({
                    points:da.data.map((item,index)=>{
                        return {
                            lng:item.longitude,
                            lat:item.latitude,
                            count:Math.floor(Math.random()*(100 - 1) + 1)
                        }
                    })
                },()=>{                  
                    this.state.heatmapOverlay.setDataSet({
                        data:this.state.points,
                        max:100
                    });
                })           
            }
        },function(err){  //可能是网络错误，也有可能是业务错误
            console.log(err);
        },"POST");
    }
    setDate=(date,dateString)=>{
        this.setState({
            startDate:dateString[0],
            endDate:dateString[1] 
        })
    }
    handleProvinceSelect(val){
        this.setState({
            currentProvince:val
        });
    }
}

export default connect(function(state){
    return {
        ...state
    }
})(Heatmap)